import { Button, Input, InputNumber, Select, ConfigProvider } from 'antd';
import React, { useEffect, useState } from 'react';
import { getRelationUserForTask, createNewTask } from 'apis/task';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';

enum RelationUserTypeEnum {
    Tagger = 1,
    FirstReview = 2,
    LastReview = 3,
}

function MySelector(props): JSX.Element {
    const { type, changeSelector, value, style, placeholder, isTemplate } = props;
    const [options, setOptions] = useState([]);

    async function fetchOptions(): Promise<void> {
        if (type) {
            const res = await getRelationUserForTask({ type });
            setOptions(res.userList.map(v => {
                return { label: v.userName, value: v.userId };
            }))
        }
        if (isTemplate) {
            // const option = await
        }
    }

    useEffect(() => {
        fetchOptions();
    }, [])

    return <Select
        value={value}
        style={style}
        placeholder={placeholder}
        onChange={(value) => changeSelector(type, value)}
        options={options}
    />
}

function CreateTaskComponent(props): JSX.Element {
    const { max, closeDrawer, selectedRows, onAddNewTask } = props;
    const [taskConfig, setTaskConfig] = useState<{
        perCount: number;
        taskName: string;
        templateId: number;
        tagger: number;
        firstReviewer: number;
        lastReviewer: number;
    }>({
        perCount: 1,
        taskName: null,
        templateId: null,
        tagger: null,
        firstReviewer: null,
        lastReviewer: null
    });

    function changeSelector(type: RelationUserTypeEnum, value: number): void {
        const obj = Object.assign({}, taskConfig);
        switch (type) {
            case RelationUserTypeEnum.Tagger:
                obj.tagger = value;
                break;
            case RelationUserTypeEnum.FirstReview:
                obj.firstReviewer = value;
                break;
            case RelationUserTypeEnum.LastReview:
                obj.lastReviewer = value;
                break;
            default:
                obj.templateId = 1
        }
        setTaskConfig(obj);
    }

    async function confirmCreate(): Promise<void> {
        await createNewTask({
            perTaskPicAmount: taskConfig.perCount,
            batchTaskName: taskConfig.taskName,
            labelTemplateId: 1,//taskConfig.templateId,
            picStr: selectedRows.map((v) => v.id).join(','),
            taskCheckPerson: {
                labelUserId: taskConfig.tagger,
                firstCheckUserId: taskConfig.firstReviewer,
                recheckUserId: taskConfig.lastReviewer
            },
        });
        onAddNewTask();
    }
    return (
        <div className='flex flex-col h-100%'>
            <div className='p-24px flex flex-col gap-15px flex-1'>
                <div className='flex flex-items-start gap-10px'>
                    <span className='line-height-32px'>单个任务图片数量：</span>
                    <div className='flex flex-col gap-10px'>
                        <InputNumber
                            value={taskConfig.perCount}
                            className='text-align-center w-160px'
                            addonBefore={<MinusOutlined onClick={() => {
                                if (taskConfig.perCount > 1) {
                                    setTaskConfig({
                                        ...taskConfig,
                                        perCount: taskConfig.perCount - 1
                                    });
                                }
                            }} />}
                            addonAfter={<PlusOutlined onClick={() => {
                                if (taskConfig.perCount < max) {
                                    setTaskConfig({
                                        ...taskConfig,
                                        perCount: taskConfig.perCount + 1
                                    });
                                }
                            }} />}
                            defaultValue={1} min={1} max={max} />
                        <span className='text-#666'>已选择<span className='text-#323232 font-500 text-16px m-l-4px m-r-4px'>{selectedRows.length}</span>条数据，预计创建<span className='text-#323232 font-500 text-16px m-l-4px m-r-4px'>{Math.ceil(selectedRows.length / taskConfig.perCount)}</span>个子任务</span>
                    </div>
                </div>
                <div className='flex flex-items-center gap-10px'>
                    <span className='block w-75px'>任务名称：</span>
                    <Input style={{ width: '80%' }} value={taskConfig.taskName} onChange={(e) => {
                        setTaskConfig({
                            ...taskConfig,
                            taskName: e.target.value
                        });
                    }} placeholder="请输入任务名称" />
                </div>
                <div className='flex flex-items-center gap-10px'>
                    <span className='block w-75px'>任务模板：</span>
                    <MySelector
                        value={taskConfig.templateId}
                        style={{ width: '80%' }}
                        isTemplate={true}
                        placeholder='请选择任务模板'
                        changeSelector={changeSelector} />
                </div>
                <div className='flex flex-items-center gap-10px'>
                    <span className='block w-75px'>标注员：</span>
                    <MySelector
                        value={taskConfig.tagger}
                        style={{ width: '200px' }}
                        type={RelationUserTypeEnum.Tagger}
                        placeholder='请选择标注员'
                        changeSelector={changeSelector}
                    />
                </div>
                <div className='flex flex-items-center gap-10px'>
                    <span className='block w-75px'>初审员：</span>
                    <MySelector
                        value={taskConfig.firstReviewer}
                        style={{ width: '200px' }}
                        type={RelationUserTypeEnum.FirstReview}
                        placeholder='请选择初审员'
                        changeSelector={changeSelector}
                    />
                </div>
                <div className='flex flex-items-center gap-10px'>
                    <span className='block w-75px'>复审员：</span>
                    <MySelector
                        value={taskConfig.lastReviewer}
                        style={{ width: '200px' }}
                        type={RelationUserTypeEnum.LastReview}
                        placeholder='请选择复审员'
                        changeSelector={changeSelector}
                    />
                </div>
            </div>
            <div className='flex flex-justify-end gap-10px p-24px border-t-1px border-t-#E5E6EB'>
                <Button onClick={() => {
                    closeDrawer();
                }}>取消</Button>
                <Button type="primary" onClick={confirmCreate}>确认创建</Button>
            </div>
        </div>
    );
}

export default React.memo(CreateTaskComponent);
